<script setup lang="ts">

import {Back} from "@element-plus/icons-vue";
import {useRouter, useRoute} from "vue-router";
import {ref, onMounted, defineExpose, getCurrentInstance} from 'vue'
import { NavBar } from 'vant'; // 引入NavBar组件
import { ElMessage } from 'element-plus'

// useRoute: 取路由参数
// useRouter: 1.编程式路由跳转，2.还有<router-link>方式

const router = useRouter();
const route = useRoute(); //路由参数(query/params) 包含在 route 对象中
const {query} = useRoute();

const global = getCurrentInstance().appContext.config.globalProperties;

//编程式路由跳转，返回上一页
const testRouter = () => {
  router.go(-1) // history.back(), history.forward(), history.go(-1|1)
}

//删除按钮点击事件（接收当前订单的orderId）
const deleteOrder=(orderId: number)=>{
  console.log("订单id:"+ query.orderId);
  //发送删除演出订单请求
  global.$http.delete(`/public/maoyanmovieproject/deletePerformanceOrderById/${orderId}`)
      .then(resp=>{
        if(resp.data==='success'){
          //在浏览器上显示信息
          ElMessage(`删除演出订单成功!`);
          // 删除成功后刷新订单列表（移除已删除的项）
          performancesOrderList.value = performancesOrderList.value.filter(item => item.orderId !== orderId);
        }else{
          //在浏览器上显示信息
         // console.log("订单id:"+ query.orderId);
          ElMessage(`删除演出订单失败!`);
        }}).catch(err => {
    console.error('删除演出订单失败:', err);
  })
}

// 存储所有演出订单信息
const performancesOrderList = ref<Array<{
  orderId: number, // 订单唯一ID（关键，用于删除）
  pid:string,  //演出id
  pname: string,  //演出名
  purl: string,   //演出图片
  ptime: string,   //演出时间
  plocation: string,   //演出地点
  totalPrice:number  //总价
}>>([]);

//打印id用于测试
onMounted(() => {
  console.log('路由query中的userId：', query.userId); // 确认是否有值
  if (query.userId) {
    getPerformance();
  } else {
    console.warn('缺少用户ID参数');
  }
})

const getPerformance = () => {
  //访问后端
  // 关键修复：用反引号（`）代替单引号（'），才能解析${query.id}!!!!!!
  global.$http.get(`/public/maoyanmovieproject/selectAllPerformanceOrderByUserId/${query.userId}`)
      .then(resp => {
        console.log(resp.data);
        performancesOrderList.value = resp.data;
      }).catch(err => {
    console.error('获取演出信息失败:', err);
    // 可以添加错误提示
  })
}

</script>

<template>
  <div class="allBox">
  <el-affix position="top" :offset="0">
    <!-- 顶部栏容器 -->
    <div class="head">
      <!-- 返回图标   -->
      <el-row class="row-container">
        <el-col :span="2">
          <!-- 返回图标   -->
          <el-icon style="font-size: xx-large; cursor: pointer; " @click="testRouter">
            <Back/>
          </el-icon>
        </el-col>
        <el-col :span="22">
          <h2 class="myText">我的演出订单</h2>
        </el-col>
      </el-row>
      </div>
  </el-affix>
<br>

<!--订单部分  -->
  <div class="myOrder " v-for="item in performancesOrderList" :key="item.orderId">
    <div>
      <p>{{item.plocation}} </p>
      <el-divider />
      <el-row>
        <el-col :span="8">
          <router-link :to="{name:'performance-detail',query:{id:item.pid}}">
         <el-image :src="item.purl"/>
          </router-link>
        </el-col>
        <el-col :span="16">
          <h2 class="">{{item.pname}}</h2>
          <p>{{item.ptime}} </p>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="12">
          <p>总价：{{item.totalPrice}}元 </p>
        </el-col>
        <el-col :span="12">
         <el-button @click="deleteOrder(item.orderId)">删除订单</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
  <br>

  </div>
</template>

<style scoped>
.allBox{
  background-color: #f5f5f5;
}
.myText{
  text-align: center;
}
.head{
   height: 60px;
  //align-content: center;
  padding:15px ;
  background-color: white;
border-bottom: 1px solid #eee; /*底部边框，可选*/
}
/* 行容器设置垂直居中，确保内容在高度内居中 */
.row-container {
  height: 100%; /* 继承父容器高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  align-content: center;
  padding: 0 16px; /* 左右内边距，可选 */
}
/* 订单样式 - 添加边框和间隔 */
.myOrder {
  margin: 15px;
  padding: 15px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: white;
}
</style>